import { t } from 'i18next'
import React, { useEffect, useState } from 'react'
import { StyledModal } from './style'
import { Modal, Select } from '@kedacom/react-next'
import { allVmpStyleData, StyleData } from '../interface'
import { useMeetingParamsStore } from '../../../meetingParams/store'

export interface StyleModalProps {
	open: boolean
	style: StyleData
	setOpen: (val: boolean) => void
	onSelect: (id: number) => void
}
export default function StyleModal(props: StyleModalProps) {
	const { open, style, setOpen, onSelect } = props
	const [value, setValue] = useState(0)
	const [curInnerStyle, setCurInnerStyle] = useState(style)
	const [styleData, setStyleData] = useState(allVmpStyleData)
	const [selectData, setSelectData] = useState<{ value: number; label: string }[]>([
		{
			value: 0,
			label: t('全部'),
		},
	])
	useEffect(() => {
		setCurInnerStyle(style)
	}, [style])
	useEffect(() => {
		setValue(0)
		setCurInnerStyle(style)
		/**视图*/
		let result = allVmpStyleData.filter((item) => {
			// let sfu_id = [1, 2, 4, 5, 34, 64, 13, 7, 8, 18, 65, 66, 19, 17, 67, 11]
			// const meetingType = useMeetingParamsStore.getState().meetingType
			// if (meetingType === 2) {
			// 	if (sfu_id.includes(item.id)) {
			// 		return true
			// 	} else {
			// 		return false
			// 	}
			// }
			return true
		})
		/**下拉列表 */
		let _selectData: { value: number; label: string }[] = [
			{
				value: 0,
				label: t('全部'),
			},
		]
		result.forEach((item) => {
			let count = item.listItemCount
			if (_selectData.findIndex((i) => i.value === count) !== -1) return
			_selectData.push({
				value: count,
				label: count + t('画面'),
			})
		})
		setSelectData(_selectData)
		setStyleData(result)
	}, [open])
	useEffect(() => {
		setStyleData(value === 0 ? allVmpStyleData : allVmpStyleData.filter((item) => item.listItemCount === value))
	}, [value])
	return (
		<Modal
			open={open}
			title={t('画面合成风格选择')}
			width={732}
			height={408}
			onOk={() => {
				setOpen(false)
				onSelect(curInnerStyle.id)
			}}
			onCancel={() => {
				setOpen(false)
			}}
			okText={t('确定')}
			cancelText={t('取消')}
		>
			<StyledModal>
				<Select
					className="style-select"
					value={value}
					options={selectData}
					onChange={(e, val, opt) => {
						setValue(val)
					}}
				></Select>
				<div className="modal-slider-bar">
					<div className="modal-slider-view">
						<ul>
							{styleData.map((item) => (
								<li
									key={item.id}
									className={`modal-style-box ${item?.className} ${
										item?.id === curInnerStyle.id ? 'select' : ''
									}`}
									data-key={item.dataKey}
									onClick={() => {
										setCurInnerStyle(item)
									}}
								></li>
							))}
						</ul>
					</div>
				</div>
			</StyledModal>
		</Modal>
	)
}
